<template>
  <div class="search-suggest">
    <van-cell
      v-for="(item, index) in suggestList"
      :key="index"
      icon="search"
      @click="$emit('onSearch',item)"
    >
      <div slot="title" v-html="highLight(item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestion } from "@/api/search.js";

// 按需加载有好处,只会把使用到成员打包到结果中
import { debounce } from "lodash";

export default {
  data() {
    return {
      suggestList: [],
    };
  },
  props: {
    searchText: {
      type: String,
      required: true,
    },
  },
  watch: {
    searchText: {
      // 当searchText 发生改变的时候就会调用handler函数
      // 注意handler函数名称是固定的
      // handler(value) {
      //   this.loadSearchSuggestions(value);
      // },
      // debounce函数
      // 参数1:一个函数
      // 参数2:延迟时间,单位是毫秒
      // 返回值:防抖之后的函数
      handler:debounce(function(value){
        // console.log(value)
        this.loadSearchSuggestions(value);
      },200),
      immediate: true, //该回调会在侦听开始之后被立即调用
    },
  },
  methods: {
    async loadSearchSuggestions(q) {
      try {
        const { data } = await getSearchSuggestion({ q });
        // console.log(data)
        let res = data.data.options;
        // 判断用户输入的内容后台返回的数据为空,然后输入的面板为false
       if(!res[0]){
        // this.$toast('数据获取为空,请重新输入')
        return  
       }
        this.suggestList = res;
      } catch (err) {
        // console.log(err)
        this.$toast("数据获取失败,请稍后重试");
      }
      // getSearchSuggestion({q}).then(res=>{
      //   console.log(res,222)
      // })
    },
    highLight(item){
      // 正则表达式  //中间的内容都会当做匹配字符来使用,而不是数据变量
      // 如果需要根据数据变量动态的创建正则表达式,则手动new RegExp
      // RegExp正则表达式构造函数
      // 参数1:匹配模式字符串,它会根据这个字符串创建正则对象
      // 参数2:匹配模式,要写到字符串中
      // console.log(item,"这是输入的数字")

      const reg = new RegExp(this.searchText,'gi')
      // console.log(reg)
      return item.replace(reg,`<span class='active'>${this.searchText}</span>`)
    },
  },
};
</script>

<style scoped lang="less">
  .search-suggest {
    /deep/ span.active {
      color: #3296fa;
    }
  }
</style>